<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>QQ音乐首页</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>

	<body>
		<div class="index_wrap">
			<!--logo头部-->
			<div class="index_header">
				<i class="logo"></i>
				<a href="" class="down_load">下载APP</a>
			</div>
			<!--选项卡导航部分-->
			<div class="index_nav">
				<ul class="ul_nav">
					<li class="recommend active">推荐
						<div class="line active"></div>
					</li>
					<li class="rank_list">排行榜
						<div></div>
					</li>
					<li class="seek">搜索
						<div></div>
					</li>
				</ul>
			</div>
			<!--内容(轮播图，内容，尾部)-->
			<div class="content_wrapper">
				
			
			<div class="index_content active recommend">
				<!--轮播图-->
				<div class="carousel_wrap">
					<div class="lunbo_wrap">
						<!--这是轮播图的容器-->
						<ul class="pic_box">
							<!--<li class="li_list"><a href="https://y.qq.com/m/act/trumpcard3/index.html?ADTAG=myqq&from=myqq&channel=10007100"><img src="https://y.gtimg.cn/music/photo_new/T003R720x288M000000sLD6h42kLLo.jpg?max_age=2592000" /></a> </li>-->
						</ul>
						<!--底部的控制点-->
						<ul class="pannel">

						</ul>

					</div>
				</div>

				<!--电台-->
				<div class="radio_wrap same_list">
					<h2>
						电台
					</h2>
					<ul class="radio_ul same_ul">
						<!--<li>
							<a href="">
								<div class="radio_pic same_pic_box">
									<img src="img/r.jpg"/>
									<span class="icon icon_play"></span>
								</div>
								<div class="radio_h3_title">
									<h3>
										热歌
									</h3>
								</div>
							</a>
						</li>-->
					</ul>
				</div>
				<!--热门歌单-->
				<div class="hot_song same_list">
					<h2>
						热门歌单
					</h2>
					<ul class="song_ul same_ul">
						<!--<li>
							<a href="">
								<div class="song_pic same_pic_box">
									<img src="img/r.jpg"/>
									<span class="listen_count">
										<i class="icon icon_listen"></i>
										798.2万
									</span>
									<span class="icon icon_play"></span>
								</div>
								<div class="song_h3_title">
									<h3>
										哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
									</h3>
									<p>哈</p>
								</div>
							</a>
						</li>-->
					</ul>
					<p class="list_more">
						<a href="javascript:;">去客户端发现更多好音乐 &gt;</a>
					</p>
				</div>
				<!--脚部-->
				<footer class="mod_footer">
					<div class="version_tab">
						<a href="">查看电脑版网页</a>
					</div>
					<div class="footer_logo">
						QQ音乐
					</div>
					<p class="copyright">Copyright © 1998 - <span id="js_cpright_year">2018</span> Tencent. All Rights Reserved.</p>

				</footer>
			</div>
			<!--排行榜-->
			<div class="index_content rank_wrap" style="display: none;">
				<ul class="rank_ul">
					<!--<li class="rank_li">
						<div class="rank_div">
							<a href="javascript:;"> 
								<img src="img/rank.jpg"/>
								<span class="listen_count"><i class="icon icon_listen"></i>1930.0万</span>
							</a>
							<div class="topic_info">
								<div class="topic_cont">
				                    <h3 class="topic_tit">巅峰榜·流行指数</h3>
				                    
				                    
				                    <div class="p_wrap">
				                    <p>1<span class="text_name">山海 (Live)</span>- 华晨宇</p>
				                    
				                    
				                    <p>2<span class="text_name">屋顶着火</span>- 宋茜</p>
				                    
				                    
				                    <p>3<span class="text_name">追梦赤子心 (Live)</span>- 张韶涵</p>
                    				</div>
                				</div>
                				<i class="topic_arrow"></i>
							</div>
						</div>
					</li>-->
				</ul>
			</div>
			<!--搜索-->
			<div class="index_content search_content" style="display: none;">
				<div class="search_wrap">
					<div class="input_text">
						<form action="" method="get">
							<input type="text" id="" class="input_search" value="" placeholder="搜索歌曲、歌单、专辑"/>
							<span class="icon icon_search"></span>
							
						</form>
					</div>
				</div>
				<div class="hot_search">
					<h3 class="hot_title">
						热门搜索
					</h3>
					<div class="hot_list">
						<a class="tag_key" href="">
							梦想的声音第二季
						</a>
					</div>
				</div>
			</div>
			</div>
		</div>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="js/rank.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="js/search.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/new_rank.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/carousel.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/new_slider.js" type="text/javascript" charset="utf-8"></script>
		
	</body>

</html>